import { Component, OnInit, Host } from "@angular/core";
import { AppComponent } from "../../../../app.component";
import { EventsService } from "../events.service";
import { ActivatedRoute, Router } from "@angular/router";
import { ToasterService } from "angular2-toaster";
import { EventModel, EventStatus } from "../models/events.model";
import * as moment from 'moment';

@Component({
    templateUrl: 'event.component.html',
    providers: [EventsService]
})
export class EventComponent implements OnInit {
    public event: EventModel;
    public edit: string = 'false';
    public canEdit: boolean = false;
    public quillOptions: any = {
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons            
            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            ['link']                         // link and image, video
        ]
    }

    constructor(@Host() private rootComponent: AppComponent,
        private eventsService: EventsService,
        private route: ActivatedRoute,
        private router: Router,
        private toasterService: ToasterService) { }

    ngOnInit(): void {
        this.route.params.subscribe(param => {
            this.edit = param['edit'];
            if (this.edit == 'true') {
                this.eventsService.getEvent(param['id']).subscribe(data => {
                    this.event = this.loadData(data);
                    this.canEdit = this.event.status == EventStatus.Draft;
                });
            }
            else {
                this.event = new EventModel();
                this.event.sponsorship = false;
                this.canEdit = true;
            }
        });

        this.rootComponent.finishLoading();
    }

    public publishEvent() {
        if(this.validEvent()){
            this.saveData(EventStatus.Published);            
        }
    }

    public saveEvent() {
        if(this.validEvent()){
            this.saveData(EventStatus.Draft);
        }
    }

    private validEvent(): boolean {
        let ret: boolean = true;
        if (!this.event.name) {
            this.toasterService.pop('warning', 'Warning', 'Event name required.');
            ret = false;
        }

        if (this.event.startDate && this.event.endDate) {
            if (moment(this.event.startDate) > moment(this.event.endDate)) {
                this.toasterService.pop('warning', 'Warning', 'End date must be after start date.');
                ret = false;
            }
        }
        else {
            if (!this.event.startDate) {
                this.toasterService.pop('warning', 'Warning', 'Start date required');
                ret = false;
            }
            if (!this.event.endDate) {
                this.toasterService.pop('warning', 'Warning', 'End date required');
                ret = false;
            }
        }

        if (!this.event.body) {
            this.toasterService.pop('warning', 'Warning', 'Event content required');
            ret = false;
        }

        return ret;
    }

    private loadData(event: EventModel): EventModel {
        if (event.startDate)
            event.startDate = new Date(event.startDate);
        if (event.endDate)
            event.endDate = new Date(event.endDate);
        return event;
    }

    private saveData(status: EventStatus){
        this.event.status = status;
        if (this.canEdit && this.edit == 'true')
            this.eventsService.saveEvent(this.event).subscribe(_ => this.goBack());
        else
            this.eventsService.publishEvent(this.event).subscribe(_ => this.goBack());
    }

    private goBack() {
        this.router.navigate(['../../'], { relativeTo: this.route });
    }
}